<template>
  <t-modal
    :title="title"
    width="900px"
    :visible="visible"
    @cancel="closeModal()"
    @ok="onSubmit()"
    wrapClassName="add-modal-container"
    v-bind="footer"
    forceRender
    :confirmLoading="submitLoading"
  >
    <div class="curve-modal-body">
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :hideRequiredMark="isDisabled"
      >
        <a-form-model-item label="文件夹名称" prop="nodeName">
          <a-input v-model="form.nodeName" placeholder="请输入" />
        </a-form-model-item>
      </a-form-model>
    </div>
  </t-modal>
</template>

<script>
import { axios } from "@/utils/request";

export default {
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    operateType: {
      type: [String, Number],
      default: 1,
    },
    parameter: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      title: "新增",
      footer: {},
      isDisabled: false,
      submitLoading: false,
      form: {
        //父级id
        pid: "",
        //数据id
        uuid: "",
        //文件夹名称
        nodeName: "",
      },
      rules: {
        nodeName: [
          {
            required: true,
            message: "请输入文件夹名称",
          },
        ],
      },
    };
  },
  computed: {},
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getData();
        }
      },
      immediate: true,
    },
  },

  methods: {
    //查询数据
    async getData() {
      await this.filterTitle();
      //详情
      if (this.operateType != 1) {
        this.getDetail();
      }
    },

    //
    filterTitle() {
      let { operateType } = this;
      switch (operateType) {
        case 1:
          this.title = "新增";
          this.footer = {};
          this.isDisabled = false;
          break;

        case 2:
          this.title = "编辑";
          this.footer = {};
          this.isDisabled = false;
          break;

        case 3:
          this.title = "详情";
          this.footer = { footer: null };
          this.isDisabled = true;
          break;

        default:
          break;
      }
    },

    onSubmit() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          let { operateType } = this;
          //新增
          if (operateType == 1) {
            this.saveFormData();
          }
          //编辑
          if (operateType == 2) {
            this.updateFormData();
          }
        }
      });
    },
    //新增
    saveFormData() {
      let { form, parameter } = this;
      let formJson = {
        //父级id
        pid: parameter.pid,
        //文件夹名称
        nodeName: form.nodeName,
      };
      this.submitLoading = true;
      axios
        .post(`/probusiness/projectInitiationTree/save`, formJson, {
          headers: {
            "Content-Type": "application/json;charset=UTF-8",
          },
        })
        .then((res) => {
          if (res.statusCode === 200 || res === 1) {
            this.$message.success("处理成功", 1.5);
            this.$emit("onRefresh");
            this.closeModal();
          } else {
            this.$message.error(res?.message ?? "处理失败");
          }
        })
        .catch((_) => {})
        .finally((_) => {
          this.submitLoading = false;
        });
    },
    //编辑
    updateFormData() {
      let { form } = this;
      let formJson = {
        //父级id
        pid: form.pid,
        //数据id
        uuid: form.uuid,
        //文件夹名称
        nodeName: form.nodeName,
      };
      this.submitLoading = true;
      axios
        .post(`/probusiness/projectInitiationTree/update`, formJson, {
          headers: {
            "Content-Type": "application/json;charset=UTF-8",
          },
        })
        .then((res) => {
          if (res.statusCode === 200 || res === 1) {
            this.$message.success("处理成功", 1.5);
            this.$emit("onRefresh");
            this.closeModal();
          } else {
            this.$message.error(res?.message ?? "处理失败");
          }
        })
        .catch((_) => {})
        .finally((_) => {
          this.submitLoading = false;
        });
    },
    //详情
    getDetail() {
      let { uuid } = this.parameter;
      axios
        .post(
          `/probusiness/projectInitiationTree/getDetailByUuid?varchar=${uuid}`,
          {},
          {
            headers: {
              "Content-Type": "application/json;charset=UTF-8",
            },
          }
        )
        .then((res) => {
          this.form = {
            //父级id
            pid: res?.pid ?? "",
            //数据id
            uuid: res?.uuid ?? "",
            //文件夹名称
            nodeName: res?.nodeName ?? "",
          };
        })
        .catch((_) => {});
    },

    //重置表单
    resetForm() {
      this.form = {
        //父级id
        pid: "",
        //数据id
        uuid: "",
        //文件夹名称
        nodeName: "",
      };
      this.$refs.ruleForm.resetFields();
    },

    //关闭
    closeModal() {
      this.resetForm();
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.add-modal-container {
  .ant-modal-body {
    padding: 0 !important;
    .curve-modal-body {
      box-sizing: border-box;
      padding: 14px 70px 14px 40px;
      max-height: 700px;
      overflow: auto;
      .ant-form-item {
        display: flex;
        .ant-form-item-label {
          flex-shrink: 0;
          width: 140px;
          label {
            color: #333333;
          }
        }
        .ant-form-item-control-wrapper {
          flex: 1;
          overflow: hidden;
        }
      }
      .bj-upload-file {
        .choosed-file-warp {
          width: 100%;
        }
      }
    }
  }
}
</style>
